<template>
    <div :id="id" :class="className"  :style="{height:height,width:width}">
    </div>
  
</template>

<script>
import echarts from 'echarts'
import resize from '../mixins/resize'

export default {
    mixins: [resize],
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        id: {
            type: String,
            default: 'pie-chart'
        },
        width: {
            type: String,
            default: '200px'
        },
        height: {
            type: String,
            default: '200px'
        }
    },

    data() {
        return {
            chart: null,
            cHeight:'85%',
        }
    },
    mounted() {
        this.initChart()
    },
    methods:{
        initChart(){

          

            const myChart =  echarts.init(document.getElementById(this.id));

            const option = {
                //定义常亮
                color: ["#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab"],
                tooltip:{
                    trigger:'item',
                    formatter:"{a} <br/> {b}:{c} ({d}%)"
                },

                legend:{
                    bottom:"0%",
                    itemWidth:10, //修改图标大小
                    itemHeight:10,
                    textStyle:{
                        color: "rgba(255,255,255,.5)",
                        fontSize: "12"
                    }
                },

                series:[
                    {
                        name:"年龄分布",
                        type:"pie",
                        // 这个radius可以修改饼形图的大小
                        // radius 第一个值是内圆的半径 第二个值是外圆的半径
                        radius: ["40%", "60%"],
                        center: ["50%", "45%"],
                        avoidLabelOverlap: false,
                        //图片上的文字
                        label:{
                            show:false,
                            position:"center"
                        },
                        labelLine:{
                            show:false
                        },
                        data:[
                            { value: 1, name: "0岁以下" },
                            { value: 4, name: "20-29岁" },
                            { value: 2, name: "30-39岁" },
                            { value: 2, name: "40-49岁" },
                            { value: 1, name: "50岁以上" } 
                        ]
                    },
                ],


            };

            // 3. 把配置给实例对象
            myChart.setOption(option);

           
           
        },

       
    }



}

</script>

